<template>
    <view class="content">
        <van-nav-bar :title="scrolling? navBarTitle : '' " left-arrow @click-left="onClickLeft"> </van-nav-bar>
        <scroll-view class="scroll-content" scroll-y :lower-threshold="80" @scroll="scrollPage" show-scrollbar="false">
            <view class="tabTop">
                <view class="title"> {{navBarTitle}} <img
                        src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/questionIcon.png"
                        alt="" style="width: 44rpx; height: 44rpx;margin-left: 24rpx;"> </view>
                <view class="checkedInDay">已经连续签到123天</view>
                <view class="checkInDailyBox">
                    <view class="checkInDailyTitle">本周签到进度</view>
                    <view class="checkInWeek">
                        <calendar  :spotMap="spotMap" @getDateList="getDateList" @monthChange="monthChange" @selectDay="selectDay"></calendar>
                       
                        <!-- <calendar :changeDateType="changeDateType" :showCalendar="showCalendar" :selectDay="selectDay"
                        @changeDay="changeDay" :selectBetween="selectBetween"></calendar> -->
                    </view>
                    <view class="checkInDailyRecordD">
                        <!-- <week-switch @getWeek="getWeek"></week-switch> -->
                    </view>
                </view>
                <view class="pointsTasksBox">
                    <view class="tasksBoxTitle">即将获得</view>
                    <view class="pointsTasksList">
                        <view class="tasksItemBox" @click="toMysteryBoxDetail">
                            <view class="tasksIcon">
                                <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/mysteryBox.png"
                                    alt="" style="width: 242rpx; height:242rpx;">
                            </view>
                            <view class="tasksContent">
                                <view class="tasksName">7天签到惊喜盒</view>
                                <view class="button" v-if="isbutton"> 待领取</view>
                                <view class="progressText" v-if="!isbutton"></view>
                                <view class="tasksProgress" v-if="!isbutton">
                                    <van-progress :percentage="Number((4/ 7) * 100).toFixed(0)" stroke-width="8px"
                                        color="#F1551C" track-color="#FFDFCB" show-pivot="false" show-info="false" />
                                </view>
                            </view>
                        </view>
                        <view class="tasksItemBox">
                            <view class="tasksIcon">
                                <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/mysteryBox.png"
                                    alt="" style="width: 242rpx; height:242rpx;">
                            </view>
                            <view class="tasksContent">
                                <view class="tasksName">30天签到惊喜盒</view>
                                <view class="button" v-if="!isbutton"> 待领取</view>
                                <view class="progressText" v-if="isbutton">还剩 81天</view>
                                <view class="tasksProgress" v-if="isbutton">
                                    <van-progress :percentage="Number((4/ 30) * 100).toFixed(0)" stroke-width="8px"
                                        color="#F1551C" track-color="#FFDFCB" show-pivot="false" show-info="false" />
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>

        </scroll-view>
        
    </view>
</template>

<script>
import { calendar } from '@/mycomponents/calendar'
import STOPMAPS from '@/utils/constant'
import { getWeekDate } from '@/utils/getWeekDate'
import { getSelectDate } from '@/utils/getSelectDate'
// import { weekSwitch } from '@/mycomponents/weekSwitch'
export default {
    components: {
        calendar,
        // weekSwitch
    },
    data() {
        return {
            navBarTitle: '每日签到',
            scrolling:false,
            params:{}, //接受从路由传过来的参数
            // showCalendar: true, // 展示日历
            // spotMap: [],
            // // eslint-disable-next-line no-undef
            // STOPMAPS, // 标记状态全局储存
            // selectBetween: '', // 日周月
            // changeDateType: false, // 日历if占位渲染，
            // changeDateTypeWeek: true, // 日历if占位渲染，
            // changeDateTypeMonth: false, // 日历if占位渲染，
            // selectDate: '', // 页面渲染的时间
            // selectDay: '',
            // beforeWeek: new Date().getTime() - 7 * 24 * 60 * 60 * 1000,
            // dateIndex:1,
            pointsTasksList:[
                {
                    icon:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/tasksCheckinDailyIcon.png',
                    name:'完成每日签到',
                    num:1,
                    isTag:true
                },
                {
                    icon:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/tasksVideoIcon.png',
                    name:'观看视频广告（1/10）',
                    num:10,
                    isTag:false
                },
                {
                    icon:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/tasksMallIcon.png',
                    name:'逛逛惊喜商城15s',
                    num:1,
                    isTag:false
                },
                {
                    icon:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/tasksMakeOrderIcon.png',
                    name:'下单惊喜商城商品',
                    num:10,
                    isTag:false
                },
                {
                    icon:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/tasksActivitiesIcon.png',
                    name:'报名参与活动',
                    num:3,
                    isTag:false
                },
                {
                    icon:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/tasksNewMemberIcon.png',
                    name:'邀请新用户完成注册（0/20）',
                    num:100,
                    isTag:false
                }
            ],
            isbutton:true
        }
    },
    onLoad(data) {
      
    },
    onReady(){
        // this.paramsDate = getWeekDate(this.beforeWeek, this.dateIndex)
        // this.changeWeekDate()
    },
    methods: {
        // 滑动
        scrollPage(e) {
            console.log(e.detail.scrollTop, this.scrolling)
            if (e.detail.scrollTop > 25 && !this.scrolling) {
                this.scrolling = true
            } else if ((e.detail.scrollTop <= 25 && this.scrolling) || (e.detail.scrollTop <= 25 && !this.scrolling)) {
                this.scrolling = false
            }
        },
        // 返回键
        onClickLeft () {
            uni.navigateBack()
        },
        // 2.3.1版本 获取selectDate
        // changeWeekDate () {
        //     this.selectDate = this.paramsDate.selectDate
        //     this.selectDay = this.paramsDate.selectDay
        //     this.startTime = this.paramsDate.startTime
        //     this.endTime = this.paramsDate.endTime
        // },
        // 显示日历组件  切换日期点击事件
        changeDay (e) {
            console.log(e, 'day')
            this.showCalendar = false // 选择完日期关闭日历
            // const time = new Date()
            // const nowYear = time.getFullYear()
            if (e !== undefined) {
                this.teacherTableList = []
                this.teacherContentData = [] // 教师端异常数据表格
                this.teacherManagerParams.pageNum = 1
                this.showStatistic = false

                this.paramsDate = getSelectDate(e, this.selectBetween)
                this.changeWeekDate()
                this.paramsStartDate = this.startTime
                this.paramsEndDate = this.endTime
                if (this.selectBetween === 'single') {
                    // this.selectDay = e.selectDay
                    // if (e.year === nowYear) {
                    //     this.selectDate = e.month + '月' + e.day + '日'
                    // } else {
                    //     this.selectDate = e.year + '年' + e.month + '月' + e.day + '日'
                    // }
                    // this.paramsStartDate = e.selectDay
                    // this.paramsEndDate = e.selectDay
                    this.markmultipleuserfordayParams.markDate = e.selectDay
                    this.getUnMonitorStudentInfoMethod()
                } else if (this.selectBetween === 'multiple') {
                    // this.selectDay = e.startTime
                    // if (e.startTime.slice(0, 4) === e.endTime.slice(0, 4) && Number(e.endTime.slice(0, 4))===nowYear) {
                    //     if (e.startTime.slice(5, -3) === e.endTime.slice(5, -3)) {
                    //         this.selectDate = e.startTime.slice(5, -3) + '月' + e.startTime.slice(8, 10) + '日~' + e.endTime.slice(8, 10) + '日'
                    //     } else {
                    //         this.selectDate = e.startTime.slice(5, -3) + '月' + e.startTime.slice(8, 10) + '日~' + e.endTime.slice(5, -3) + '月' + e.endTime.slice(8, 10) + '日'
                    //     }
                    // } else {
                    //     this.selectDate = e.startTime.slice(0, 4) + '年' + e.startTime.slice(5, -3) + '月' + e.startTime.slice(8, 10) + '日~' + e.endTime.slice(0, 4) + '年' + e.endTime.slice(5, -3) + '月' + e.endTime.slice(8, 10) + '日'
                    // }
                    // this.paramsStartDate = e.startTime
                    // this.paramsEndDate = e.endTime
                    // this.markmultipleuserfordayParams.markDate = e.startTime + '~' + e.endTime
                    this.markmultipleuserfordayParams.markDate = this.startTime + '~' + this.endTime
                    this.getClassUnMonitorStudentApiMethod()
                } else {
                    // this.selectDay = e.startTime
                    // if (e.year === nowYear) {
                    //     this.selectDate = e.month + '月'
                    // } else {
                    //     this.selectDate = e.year + '年' + e.month + '月'
                    // }
                    // this.paramsStartDate = e.startTime
                    // this.paramsEndDate = e.endTime
                    // this.markmultipleuserfordayParams.markDate = e.startTime + '~' + e.endTime

                    this.markmultipleuserfordayParams.markDate = this.startTime + '~' + this.endTime
                }

                this.showMark = false // 弹窗
            }
        },
        // 日期的切换
        getDateList (e) {
            console.log(e, 'getDateList')
        },
        monthChange (e) {
            // 切换月份  获取月份，
            console.log(e, 'monthChange')
            this.spotMap = []
        },
        selectDay (e) {
            // 日期选择
            console.log(e, 'selectDay')
        },

        // // 或者盲盒进度  或者明细
        // toMysteryBoxDetail(){
        //     uni.navigateTo({
        //         url:'/pages/blindBox/mysteryBoxDetail'
        //     })
        // }
    }
}
</script>

<style lang="scss" scoped>
.content {
    background-color: #ffffff;
    display: flex;
    flex-direction:column;
    height:100vh;
    overflow:hidden;
    box-sizing: border-box;
}
.scroll-content {
    flex: 1;
    height: 1px;
}
.tabTop{
    padding:0rpx 48rpx;
}
.title{
    font-size: 60rpx;
    line-height: 60rpx;
    text-align: left;
    color: #111111;
}
.checkedInDay{
    font-size: 28rpx;
    color: #111111;
    line-height: 28rpx;
    margin-top: 43rpx;
}
.checkInDailyBox{
    margin-top: 63rpx;
    width: 100%;
    height: 248px;
    background: #ffeadd;
    display: flex;
    flex-direction: column;
    // justify-content: space-between;
    // position: relative;

    .checkInDailyTitle{
        margin-top: 50rpx;
        padding-left:40rpx;
    }

    .checkInWeek{
        margin-top: 42rpx;
        height: 145rpx;
    }

    .checkInDailyRecordD{
        margin-top: 13rpx;
        margin-left: 20rpx;
        margin-right: 20rpx;
        background: #ffffff;
        height: 145rpx;
        box-shadow: 0 7px 16px 0 #d9c5b769;
    }


}
.pointsTasksBox{
    margin-top: 71rpx;
    padding-bottom: calc(18rpx + env(safe-area-inset-bottom));   //底部  18+36=54px

    .tasksBoxTitle{
        font-size: 32rpx;
        color: #111111;
        line-height:32rpx ;
    }
    .pointsTasksList{
        margin-top:5rpx;  //5+47=52px
    }
    .tasksItemBox{
        margin-top: 47rpx;
        padding:0rpx;
        display: flex;
        align-items: center;

        .tasksContent{
            width: 50%;
            padding-left: 40rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            .tasksName{
                font-size: 32rpx;
                color: #111111;
                line-height: 32rpx;
            }
            .button{
                margin-top: 40rpx;
                border-radius: 30px;
                border: 1px solid #FF6203;
                font-size: 26rpx;
                line-height: 26rpx;
                color: #ff6203;
                padding: 18rpx 0rpx;
                text-align: center;
                width: 185rpx;
            }
            .progressText{
                margin-top: 80rpx;
                font-size: 28rpx;
                line-height: 28rpx;
                text-align: left;
                color: #666666;
            }
            .tasksProgress{
                width: 100%;
                margin-top: 34rpx;
            }

        }

    }
    .tasksItemBox:last-child{
        border-bottom: none;
    }
}

::v-deep .van-nav-bar__left {
    width: 56px;
    height: 44px;
}

::v-deep .van-icon {
    color: #242629 !important;
}

::v-deep .van-cell{
    padding-left: 0px !important;
    border-bottom: 1px solid #f9f9f9;
}
// 滚动条 去掉自带的文字提示  
::v-deep .van-progress__pivot {
	display: none;
}
</style>
